<template>
  <div class="result-mvs">
    <div
      v-for="item in mvs"
      @click="toMv(item.id)"
      class="each-mv"
      :key="item.id"
    >
      <div class="each-mv-pic">
        <img v-lazy="item.cover" />
        <p class="each-mv-duration">
          {{
            Math.floor((item.duration * 0.001) / 60)
              .toString()
              .padStart(2, "0")
          }}:{{ ((item.duration * 0.001) % 60).toString().padStart(2, "0") }}
        </p>
      </div>
      <div class="each-mv-msg">
        <span>{{ item.name }}</span>
        <artists :artists="item.artists" class="artists"></artists>
      </div>
    </div>
    <mu-infinite-scroll
      :loadingText="loadingText"
      :loading="loading"
      @load="fetchData"
    />
  </div>
</template>

<script lang="ts">
import artists from "../../../components/artists.vue";
import { Vue, Component, Watch } from "vue-property-decorator";
import { MVInfo } from "@/model/music-info.model";
import Router, { Route } from "vue-router";
import { APIType } from "@/api";
import { SearchType } from "@/model/search-response.model";
import { namespace } from "vuex-class";
import { CommonIdType } from "@/model/id-or-enum.model";
const AppModule = namespace("app");
@Component({
  components: {
    artists,
  },
})
export default class SearchResultMVComponent extends Vue {
  mvs: MVInfo[] = [];
  loading = false;
  loadingText = "努力加载中...";

  $route: Route;
  $router: Router;
  $api: APIType;

  @AppModule.Mutation("setMvId")
  setMvId: (id: CommonIdType) => void;

  mounted() {
    this.fetchData();
  }
  // 计算当前搜索的值
  get query() {
    return this.$route.query.val;
  }
  // query变化重新搜索
  @Watch("query")
  private onQueryChange() {
    this.mvs = [];
    this.fetchData();
  }
  toMv(id: CommonIdType) {
    this.setMvId(id);
    this.$router.push({ path: `/mv/${id}` }).catch((err) => err);
  }
  fetchData() {
    const offset = this.mvs.length;
    this.loading = true;
    this.$api
      .searchByType<"MV">(this.$route.query.val, SearchType.MV, offset)
      .then((res) => {
        if (res?.result?.mvs) {
          this.mvs = [...this.mvs, ...res.result.mvs];
        }
      })
      .finally(() => (this.loading = false));
  }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/scss/utils.scss";
.result-mvs {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .each-mv {
    width: 49%;
    margin-bottom: 0.1rem;
    .each-mv-pic {
      position: relative;
      img {
        width: 100%;
      }
      .each-mv-duration {
        position: absolute;
        bottom: 1px;
        left: 3px;
        color: #fff;
        font-size: 0.12rem;
      }
    }
    .each-mv-msg {
      > span {
        font-size: 0.25rem;
        @include shenglue;
      }
      .artists {
        @include shenglue;
        font-size: 0.12rem;
      }
    }
  }
}
</style>
